<template>
    <div v-loading="loading" class="w-100">
        <el-input type="text" v-model="value" @change="updateValue" />
        <div class="text">服务类目：工具 > 信息查询，<span @click="getTemplateId" class="link">一键获取模板</span>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        modelValue: {
            type: String,
            default: ''
        },
        template_id_short: {
            type: String,
            default: ''
        },
        keywords: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            loading: false,
            value: '',
        };
    },
    created() {
        this.value = this.modelValue;
    },
    methods: {
        updateValue() {
            this.$emit('update:modelValue', this.value);
        },
        getTemplateId() {
            this.loading = true;
            this.$http.usePost("app/ycMassage/admin/Notice/getWxTemplateId", {
                template_id_short: this.template_id_short,
                keywords: this.keywords
            }).then(res => {
                if (res.code === 200) {
                    this.value = res.data.template_id;
                    this.$emit('update:modelValue', this.value);
                } else {
                    this.$useMessage(res.msg, 'error');
                }
            }).finally(() => {
                this.loading = false;
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.w-100 {
    width: 50vw;
}

.text {
    color: rgb(102, 102, 102);
    padding: 5px 0px 0px;
    font-size: 12px;
}

.link {
    color: var(--el-color-primary);
    cursor: pointer;
}
</style>